// 导入Vue
import Vue from 'vue'
// 导入路由这个插件
import VueRouter from 'vue-router'
// 导入组件
import discover from '@/views/discover'
import my from '@/views/my'
import friends from '@/views/friends'
import NotFound from '@/views/NotFound'
import TuiJian from '@/views/TuiJian'
import TopList from '@/views/TopList'
import SongList from '@/views/SongList'

// 让Vue安装路由--让vue拥有路由的一些功能
Vue.use(VueRouter)

// 制定路由规则
const routes = [
  // 从a路径，自动跳转到b路径
  { path: '/', redirect: '/discover' },
  { 
    name: 'discover', 
    path:'/discover', 
    component: discover,
    children: [
      // 子路由的path一般不加/， 要拼接父路由的路径
      // 也可以加/， 代表不用拼接父路由路径直接访问
      { name: 'tuijian', path: 'tuijian', component: TuiJian},
      { name: 'toplist', path: 'toplist', component: TopList},
      { name: 'songlist', path: 'songlist', component: SongList},
    ]
  },
  { name: 'my', path:'/my', component: my  },
  { name: 'friends', path:'/friends', component: friends  },

  // 除了上面以外的所有路径，都会来到404
  // 以后规范是：404页面一定是写到路由规则的最后面
  { name: '404', path:'*', component: NotFound  },
]

// 实例化路由对象，并设置规则
const router = new VueRouter({
  routes
})

// 把路由对象暴露出去了
export default router
